import React, { Component } from 'react'

import Newpeople from "./components/newpeople/newpeople";
import Banner from "./components/banner/banner";
import Indexgoods from './components/indexgoods/indexgoods';
import Seckill from './components/seckill/seckill';
import Groupon from './components/groupon/groupon'


import orange_logo2 from "../../assets/img/pic_logo_white 2.png";
import icon_location from "../../assets/img/icon_location@3x.png";
import { FireFill } from 'antd-mobile-icons'
import { Link } from 'react-router-dom'

import './home.less'

import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import {
  actions,
  getNew,
  getIndexgoods,
  getGroupon,
  getSeckill,
  getCates,
  getTimeArr,
  getBanner,
  getN
} from '../../store/modules/home'

class home extends Component {
  componentDidMount() {
    // 页面倒计时 开启定时器
    // this.timer = setInterval(() => {
    //   let times = countTime("2022-05-24 00:00:00");
    //   this.setState({
    //     timeArr: { ...times }
    //   })
    // })

    let {
      home: {
        requestGetnew,
        requestIndexgoods,
        requestGroupon,
        requestSeckill,
        requestCates,
        requestTimearr,
        requestBanner,
      }
    } = this.props;

    requestGetnew();
    requestIndexgoods();
    requestGroupon();
    requestSeckill();
    requestCates();
    // requestTimearr();
    requestBanner();

  }
  componentWillUnmount() {
    let {
      home:{
        reqdel
      }
    } = this.props;
    // 清除定时器
    // clearInterval(timer)
    reqdel()
  }

  render() {
    // console.log(this.props);
    let { getnew,
      banner,
      timeArr,
      cates,
      seckill,
      groupon,
      getindexgoods,
      n,
      home: { changeN }
    } = this.props;
    // console.log(timeArr);
    return (
      <div className='home'>
        <div className='home-header'>
          <img className='logo' src={orange_logo2} alt="" />
          <div className='ipt'>
            <input type="text" />
            <span>搜索</span>
          </div>
          <img className='location' src={icon_location} alt="" />
        </div>

        <div className='home-body'>
          {/* 新人专享 */}
          <Newpeople getnew={getnew} timeArr={timeArr}></Newpeople>
          {/* 轮播图 */}
          <Banner banner={banner}></Banner>
          {/* 导航栏 */}
          <div className='nav'>
            {cates.length > 0 ? <>
              {cates.map(item => {
                return (
                  <Link to="/index/cate" className='item' key={item.id}>
                    <span><FireFill /></span>
                    <p>{item.catename}</p>
                  </Link>
                )
              })}
            </> : null}
          </div>
          {/* 秒杀 */}
          <Seckill seckill={seckill} timeArr={timeArr}></Seckill>
          {/* 万人团 */}
          <Groupon groupon={groupon} timeArr={timeArr}></Groupon>
          {/* 获取商品信息首页 */}
          <Indexgoods getindexgoods={getindexgoods} n={n} changeN={n => changeN(n)}></Indexgoods>
        </div>

      </div>
    )
  }
}
//取数据
const mapStateToProps = (state) => {
  return {
    getnew: getNew(state),
    getindexgoods: getIndexgoods(state),
    groupon: getGroupon(state),
    seckill: getSeckill(state),
    cates: getCates(state),
    timeArr: getTimeArr(state),
    banner: getBanner(state),
    n: getN(state)
  };
};
//取方法
const mapDispatchToProps = (dispatch) => {
  return {
    home: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(home);